import React,{Component} from 'react'
import {Tabs,NavBar,Icon} from 'antd-mobile';
import CircleList from './circleList.js';
import {connect} from 'react-redux';
import {push} from 'react-router-redux'
const TabPane = Tabs.TabPane;
import './style.css';
const massage= require('../../../svg/massage.svg');
const data=[
    {
        name:'美食',
        id:1
    },
    {
        name:'美景',
        id:2
    },
    {
        name:'教育',
        id:3
    },
    {
        name:'健康',
        id:4
    },
    {
        name:'周边事',
        id:5
    },
    {
        name:'段子',
        id:6
    },
    {
        name:'焦点新闻',
        id:7
    }
]

class AppCircle extends Component{
    handleTabClick=(tabid)=>{
      this.props.dispatch(push(`/home/circle?bar=${tabid}`))
    };
    componentWillReceiveProps(nextProps){
        let isBar=false
        for(let i of data){
            if(i.id==nextProps.query){
                isBar=true;
            }
        }
        if(!isBar){
            this.props.dispatch(push(`/home/circle?bar=1`));
        }
    }
    componentWillMount(){
        let isBar=false;
        for(let i of data){
            if(i.id==this.props.query){
                isBar=true;
            }
        }
        if(!isBar){
            this.props.dispatch(push(`/home/circle?bar=1`));

        }
    }
    render(){
        const {dispatch,query}=this.props;
        return(
            <div className="app-circle">
                <NavBar
                    className="top-nav-bar"
                    iconName={false}
                    rightContent={
                    <div className="top-bar-right">
                         <Icon  className="top-bar-massage" type={massage}/>
                    </div>

                    }
                    >彭州圈</NavBar>
                <Tabs defaultActiveKey={query} animated={false}  pageSize={5} onTabClick={this.handleTabClick}>
                    {
                        data.map((key,i)=>{
                            return (
                                <TabPane tab={key.name}  key={key.id.toString()}>
                                    <div className="circle-list">
                                        {query==key.id.toString()?<CircleList/>:null}
                                    </div>
                                </TabPane>
                            );
                        })
                    }
                </Tabs>
            </div>
        )
    }
}
const mapsStateToProps=(state)=>{
    return{
        query:state.routing.locationBeforeTransitions.query.bar?state.routing.locationBeforeTransitions.query.bar:"1"
    }
}
export default connect(mapsStateToProps)(AppCircle)